<template>
  <div class="home-page-root">
    <div class="layout-root-header">
      <page-header></page-header>
    </div>
    <div class="layout-root-body">
      <div v-hasRole="menuItem.role" @click="goSubPage(menuItem)" v-for="(menuItem,index) in menuData" :key="index"
           class="menu-item">
        <div class="img-con">
          <img :src="menuItem.img"/>
        </div>
        <div class="txt-con">
          {{ menuItem.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from "@/layout/components/PageHeader/index.vue";
import {LOGICAL} from "@/constantData";

export default {
  name: "home",
  components: {
    PageHeader,
  },
  data() {
    return {
      menuData: [
        {
          path: '/chit/chitList',
          name: '保单列表',
          img: require('@/assets/images/home/bdlb.png'),
          role: null
        },
        {
          path: '/chit/chitInfoLook',
          name: '保单查看',
          img: require('@/assets/images/home/bdck.png'),
          role: null
        },
        {
          path: '/policy/statistics',
          name: '保单统计',
          img: require('@/assets/images/home/bmgl.png'),
          role: null
        },
        {
          path: '/system/dept',
          name: '地域管理',
          img: require('@/assets/images/home/bmgl.png'),
          role: {role: ['system:user:admin'], logical: LOGICAL.OR},
        },
        {
          path: '/system/sysUserList',
          name: '用户管理',
          img: require('@/assets/images/home/yhgl.png'),
          role: {role: ['system:user:admin'], logical: LOGICAL.OR},
        },
        {
          path: '/system/typesOfInsurance',
          name: '险种管理',
          img: require('@/assets/images/home/xzgl.png'),
          role: {role: ['system:ordertype:admin'], logical: LOGICAL.OR},
        },
      ]
    }
  },
  methods: {
    goSubPage({path}) {
      this.$router.push({path})
    }
  }
}
</script>

<style lang="scss" scoped>
//引入公共样式表
@import "@/assets/style/businessTheme.scss";

$img-width: 116px;
.home-page-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .layout-root-header {
    height: 60px;
    width: 100%;
  }

  .layout-root-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 6% 12%;
    flex-wrap: wrap;
    height: calc(100% - 60px);
    background-image: url("@/assets/images/home/background.png");
    background-size: 100% 100%;

    .menu-item {
      width: 30%;
      height: 43%;
      background: #fff;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      cursor: pointer;

      .img-con {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;

        img {
          height: $img-width;
          width: $img-width;
        }
      }

      .txt-con {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        font-size: 18px;
        font-weight: 700;
      }
    }

  }
}
</style>
